import {useState, useEffect} from 'react'
import {useNavigate, useLocation} from 'react-router-dom'
import { Tabbar, Toast, Cell } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'

const TabbarList = () => {
    const navigate = useNavigate()
    const location = useLocation()
    let {pathname} = location
    let path = pathname.split('/')[pathname.split('/').length - 1 ]
    const [name, setName] = useState('home')
    useEffect(() => {
        setName(path)
    }, [path])
    const handleBack = (v) => {
        Toast.loading({
            message: '加载中...',
            forbidClick: true,
            duration: 500
        })
        navigate('/' + v)
        setName(v)
    }
    return (
        <div className='demo-tabbar'>
            <Tabbar value={name} onChange={v => handleBack(v)}>
                <Tabbar.Item name='home' icon={<HomeO />}>
                    首页
                </Tabbar.Item>
                <Tabbar.Item name='classify' icon={<Search />}>
                    商品
                </Tabbar.Item>
                <Tabbar.Item name='shop' icon={<FriendsO />}>
                    购物车
                </Tabbar.Item>
                <Tabbar.Item name='mine' icon={<SettingO />}>
                    我的
                </Tabbar.Item>
            </Tabbar>
        </div>
    )
}

export default TabbarList
